<template>
  <div class="demo">
    <br>
    <button v-for='tab in datas' :key='tab' @click='currentTab = tab' :class="['tab-count', { active: currentTab === tab}]">{{ tab }}</button>
    <component :is='currentTab' class="tab"></component>
  </div>
</template>

<script>
import home1 from '@/components/HelloChild/home1.vue'
import home2 from '@/components/HelloChild/home2.vue'
import home3 from '@/components/HelloChild/home3.vue'

export default {
  data () {
    return {
      currentTab: 'home1',
      datas: ['home1', 'home2', 'home3']
    }
  },
  components: {
    home1,
    home2,
    home3
  }
}
</script>

<style>
.tab-count{
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}
.tab-count:hover {
  background: #e0e0e0;
}
.tab-count.active {
  background: #e0e0e0;
}
.tab-count:focus{
  outline: 0;
} 
.tab {
  border: 1px solid #ccc;
  padding: 10px;
  width:50%;
  margin: 0 auto;
}
</style>
